<template>
  <div class="nav_outer">
    <Header v-show="!inWxmini">记加班</Header>
    <div class="content">
        <div class="setwrap"> 
            <button class="setmoney" @click="setMoney">设置基本工资</button>
        </div>
        <div class="records">
            <div class="flex_bet">
                <div class="recordnum">
                    <p>{{hours}}H</p>
                    <p>加班时长</p>
                </div>
                <div class="recordnum">
                    <p>￥{{parseFloat(account).toFixed(2)}}</p>
                    <p>加班收入</p>
                </div>
            </div>
            <div class="writearea">
                <div class="record" @click="navito('addovertime')">记加班</div>
                <div class="details" @click="navito('overtimedetail')">明细</div>
            </div>
        </div>
        <div class="bg"></div>
    </div>
  </div>
</template>
<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      hours: 0,
      account: 0,
      inWxmini: navigator.userAgent.indexOf('miniProgram')>-1
    }
  },
  created(){
    this.loadTime();
    this.loadMoney();
  },
  mounted() {
    
  },
  methods: {
    navito(url){
        this.$router.push(`/${url}`);
    },
    loadTime(){
      let that = this;
      that.Http.put("yzj/app/over_time/total",null).then(
        res => {
          that.hours = res.result;
        }
      );
    },
    loadMoney(){
      let that = this;
      that.Http.put("yzj/app/over_time/salary/total",null).then(
        res => {
          that.account = res.result;
        }
      );
    },
    setMoney(){
      let mui = this.mui,that=this;
      let prev = localStorage.getItem('salary');
      mui.prompt(
        '(元/小时)',
        (prev || '请输入'),
        '基本工资',
        ['取消', '确定'],
        function(e) {
          if (e.index == 1) {
            if(!e.value || !/\d+/.test(e.value)){
              mui.toast('您未输入正确的工资');
              return
            }
            that.Http.put(`yzj/customer/salary?salary=${e.value}`,null).then(
              res => {
                localStorage.setItem('salary',e.value);
                that.loadMoney();
              }
            );
          } else {
            
          }
        }
      );
    }
  },
  components: {
    Header
  }
}
</script>

<style scoped lang='scss'>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .content{
      
    .bg{
        width: 100%;
        background: #aaa;
        background: url(../assets/img/jbg.jpg);
        background-size: cover;
        background-position: center center;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
    }
    .setwrap{
        text-align: center;
    }
    .setmoney{
        margin-top: px2em(33);
        padding: 0 px2em(15);
        height: px2em(94);
        line-height: px2em(94);
        background: #2B6CD9;
        color: #fff;
        outline: 0;
        border: 0;
        border-radius: px2em(47);
    }
    .records{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .recordnum{
        width: px2em(280);
        padding-top: px2em(50);
        text-align: center;
        color: #fff;
        font-size: 1.4em;
        >p{
            line-height: 1.2;
            color: #fff!important;
        }
    }
    .record{
        width: px2em(212);
        height: px2em(212);
        background: #2B6CD9;
    }
    .details{
        width: px2em(89);
        height: px2em(89);
        background: rgba(43, 108, 217, .5);
        margin: px2em(36) auto!important;
    }
    .details,.record{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;color: #fff;
        border-radius: 50%;
    }
  }
</style> 